<template>
  <q-dialog
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    @before-show="$emit('before-show')"
    @hide="$emit('hide')"
    persistent
    :maximized="maximized"
  >
    <q-card :style="$q.screen.gt.xs ? 'min-width: 800px' : 'width: 100%'">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">{{ title }}</div>
        <q-space />
        <q-btn
          :icon="maximized ? 'fullscreen_exit' : 'fullscreen'"
          flat
          round
          dense
          @click="toggleMaximize"
        />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>

      <q-separator />

      <q-card-section class="q-pt-md">
        <slot></slot>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  title: { type: String, required: true },
})

const emit = defineEmits(['update:modelValue', 'before-show', 'hide'])

const maximized = ref(false)

const toggleMaximize = () => {
  maximized.value = !maximized.value
}
</script>
